<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">


    <style>
        body {
            font: 12px/1.5 "Microsoft YaHei", Tahoma, Helvetica, Arial, simsun;
        }

        .c1 {
            width: 1010px;
            float: left;
            overflow: hidden;
            border-bottom: 1px dashed #dedede;
            line-height: 1;
            margin-top: 30px;
            margin-left: 40px;
        }

        html {
            color: #333;
        }

        html body {
            background: #ccc;
            min-height: 600px;
            padding-bottom: 50px;
        }

        body, button, input, select, textarea {
            font: 12px/1.5 "Microsoft YaHei"
        }

        div {
            overflow: hidden;
        }

        a {
            text-decoration: none;
        }

        .gold {
            background: #b4a078;
            color: #fff;
        }

        .center {
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body>
<div id="app">
    <el-container>
        <el-header style="width: 100%;height: auto;background-color:white;
                    box-shadow: 1px 1px 5px;">
            <!--页头居中内容-->
            <div class="center" style="width: 980px;height: 60px;padding: 20px 0;">
                <!--趣玩logo超链接-->
                <div style="float: left;margin-left: 10px;">
                    <a href="./" style="width: 400px">
                        <img style="width: 132px;height: 57px;" src="imgs/logo.gif" alt="">
                    </a>
                </div>
                <!--登录跳转-->
                <p style="float:right;height: 22px;line-height: 20px;margin: 36px 0 0;font-size: 14px">如已注册, 点此
                    <a href="/login.html" class="gold"
                       style="width: 49px;height: 22px;border-radius: 2px;
                       margin-left: 6px;display: inline-block;text-align: center">
                        登录
                    </a>
                </p>
            </div>
        </el-header>

        <el-main style="background-color:#F5F5F5">
            <div style="width:1090px;margin: 0 auto;padding: 0">
                <el-breadcrumb separator-class="el-icon-arrow-right" style=" color: #333;">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>严选好物</el-breadcrumb-item>
                    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                    <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                </el-breadcrumb>
            </div>

            <div style="width: 1090px;height: 1589px;margin: 0 auto">

                <div style="width:1020px;background-color: white;">
                    <div class="c1">
                        <span>分类:</span>
                        <a href="" v-for="c in categoryArr" style="float:
                        left;margin-right: 30px;margin-bottom: 16px;
                        font-size: 14px;display: inline-block;color: #666">{{c}}</a>
                    </div>
                    <div class="c1">
                        <span>品牌:</span>
                        <a href="" v-for="b in brandArr" style="float:
                        left;margin-right: 30px;margin-bottom: 16px;
                        font-size: 14px;display: inline-block;color: #666">{{b}}</a>
                    </div>
                    <div class="c1">
                        <div>
                            销量<i class="el-icon-top" style="color: red;"></i>
                            价格<i class="el-icon-top" style="color: red;"></i>
                            上架时间<i class="el-icon-top" style="color: red;"></i>
                        </div>
                    </div>
                </div>
                <div style="width: 1020px;height: 1246px; background-color: white;  padding: 5px;  padding-top: 30px;box-sizing: border-box">
                    <el-row :gutter="12">
                        <el-col :span="6" v-for="product in productArr">
                            <div class="grid-content bg-purple"
                                 style="text-align: center;float: left;margin-bottom: 30px">
                                <img :src="product.url"
                                     width="245px" height="245px" alt="">
                                <p>{{product.title}}</p>
                                <p style="color: red">￥{{product.price}}</p>
                                <hr style="display: block;width: 130px;height: 1px;padding: 0;
                                margin: 6px auto 14px;border: 0;border-top: 1px solid #e8e8e8;">
                            </div>
                        </el-col>

                    </el-row>
                </div>
            </div>

            <div style="width:1090px;margin: 0 auto;padding: 0;text-align: center">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="1000"
                        style="display: inline-block;">
                </el-pagination>
                <el-button size="mini" style="vertical-align: top">下一页</el-button>
            </div>


        </el-main>


        <el-footer>
            <div>
                <div style="height: 237px;background-color: white"></div>
                <div style="height: 215px;background-color: #414141"></div>
            </div>
        </el-footer>
    </el-container>

</div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                categoryArr: ["家电生活", "日用家居", "个护配饰", "特色食品"],
                brandArr: ["诗杭", "大宇", "德尔玛", "HOMEE", "摩飞", "集米", "都乐", "阿乐乐可", "东菱", "鸣盏", "志高", "麦子厨房", "摩也", "lena", "小七泡泡", "唱吧", "小豹",
                    "韩国Didinika", "康铂氏", "mootaa", "MazMac", "涤尚", "O2泡", "森林海洋", "可茵慈", "卡宾加"],
                productArr: [{
                    title: "韩国Didinika金猪侠宝宝辅食锅",
                    url: "http://i1.quwan.com/images/202001/thumb_img/566_thumb_G_1579639727194.jpg",
                    price: "168.00"
                },
                    {
                        title: "韩国Didinika憨憨熊红色辅食锅",
                        url: "http://i1.quwan.com/images/202001/thumb_img/567_thumb_G_1579575173983.jpg",
                        price: "198.00"
                    },
                    {
                        title: "康巴赫不锈钢第三代煎盘26cm",
                        url: "http://i1.quwan.com/images/202006/thumb_img/1220_thumb_G_1591582506078.jpg",
                        price: "329.00"
                    },
                    {
                        title: "每渍每克马桶泡泡净日用装",
                        url: "http://i1.quwan.com/images/202101/thumb_img/1309_thumb_G_1611182496558.jpg",
                        price: "49.00"
                    }, {
                        title: "每渍每克马桶泡泡净日用装",
                        url: "http://i1.quwan.com/images/202101/thumb_img/1309_thumb_G_1611182496558.jpg",
                        price: "49.00"
                    }, {
                        title: "每渍每克马桶泡泡净日用装",
                        url: "http://i1.quwan.com/images/202101/thumb_img/1309_thumb_G_1611182496558.jpg",
                        price: "49.00"
                    }, {
                        title: "每渍每克马桶泡泡净日用装",
                        url: "http://i1.quwan.com/images/202101/thumb_img/1309_thumb_G_1611182496558.jpg",
                        price: "49.00"
                    },
                ]

            }
        },
        methods: {

        },
        created:function () {
            axios.get("/select/category").then(function (response) {
                v.categoryArr = response.data;
            })
        }
    })
</script>
</html>